<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="将MCP配置从JSON格式转换为TOML格式的在线工具，支持Windows环境变量自动添加"
    />
    <meta name="keywords" content="MCP, JSON, TOML, 转换, Model Context Protocol, 配置" />
    <meta name="author" content="MCP JSON2TOML" />
    <meta property="og:title" content="MCP JSON2TOML - JSON到TOML转换工具" />
    <meta property="og:description" content="将MCP配置从JSON格式转换为TOML格式的在线工具" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/favicon.ico" />

    <!-- 主题相关 meta 标签 -->
    <meta name="theme-color" content="#ffffff" />
    <meta name="color-scheme" content="light dark" />

    <!-- 无障碍访问支持 -->
    <meta name="accessibility" content="high" />

    <!-- 预加载关键资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- 防止闪烁 -->
    <script>
      // 主题初始化脚本，防止页面闪烁
      ;(function () {
        const savedTheme = localStorage.getItem('theme-mode')
        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
        const isDark = savedTheme === 'dark' || (!savedTheme && systemDark)

        // 设置初始主题类
        document.documentElement.classList.toggle('dark', isDark)
        document.documentElement.classList.toggle('light', !isDark)

        // 设置主题色
        const themeColorMeta = document.querySelector('meta[name="theme-color"]')
        if (themeColorMeta) {
          themeColorMeta.setAttribute('content', isDark ? '#171717' : '#ffffff')
        }

        // 设置颜色方案
        const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]')
        if (colorSchemeMeta) {
          colorSchemeMeta.setAttribute('content', isDark ? 'dark' : 'light')
        }
      })()
    </script>

    <title>MCP JSON2TOML - JSON到TOML转换工具</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
